<template>
    <div class="app-container">
        <!-- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="登录地址" prop="ipaddr">
                <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="登录状态" clearable style="width: 240px">
                    <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="登录时间" style="width: 308px">
                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:logininfor:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['system:logininfor:remove']">清空</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock" v-hasPermi="['system:logininfor:unlock']">解锁</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:logininfor:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="访问编号" align="center" prop="infoId" />
            <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
            <el-table-column label="登录状态" align="center" prop="status">
                <template #default="scope">
                    <dict-tag :options="sys_common_status" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="描述" align="center" prop="msg" />
            <el-table-column label="访问时间" align="center" prop="accessTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.accessTime) }}</span>
                </template>
            </el-table-column>
        </el-table> -->

        <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page.current" v-model:limit="queryParams.page.size" @pagination="getList" /> -->

        <vxe-grid ref="xGrid" v-bind="gridOptions" @checkbox-change="handleSelectionChange">
            <template #toolbar_buttons>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:logininfor:remove']">删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['system:logininfor:remove']">清空</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock" v-hasPermi="['system:logininfor:unlock']">解锁</el-button>
                    </el-col>
                </el-row>
            </template>
            <template #slotStatus="{ row }">
                <dict-tag :options="sys_common_status" :value="row.status" />
            </template>
        </vxe-grid>
    </div>
</template>

<script setup lang="ts" name="Logininfor">
    import { getCurrentInstance, ref, reactive } from "vue";
    import { pageLogininfor, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/system/logininfor";
    import { VxeGridInstance, VxeGridProps, VxeGridListeners } from "../../../../types/index";
    import XEUtils from "xe-utils";
    import { VXETable } from "../../../../packages/all";
    import { removeObjectNull } from "@/utils";
    const { proxy } = getCurrentInstance() as any;
    const { sys_common_status } = proxy.useDict("sys_common_status");

    const logininforList = ref([]);
    const loading = ref(true);
    const showSearch = ref(true);
    const ids = ref([]);
    const single = ref(true);
    const multiple = ref(true);
    const selectName = ref("");
    const total = ref(0);
    const defaultSort = ref<any>({ prop: "loginTime", order: "descending" });

    // 查询参数
    const queryParams = ref({
        // page: {
        //     current: 1,
        //     size: 10,
        // },
        // ipaddr: undefined,
        // userName: undefined,
        // status: undefined,
        // orderByColumn: undefined,
        // isAsc: undefined,
    });

    const xGrid = ref({} as VxeGridInstance);

    const gridOptions = reactive<VxeGridProps>({
        border: true,
        resizable: true,
        showHeaderOverflow: true,
        showOverflow: true,
        highlightHoverRow: true,
        keepSource: true,
        id: "10",
        height: "auto",
        rowId: "infoId",
        sortConfig: {
            trigger: "cell",
            remote: true,
        },
        filterConfig: {
            remote: true,
        },
        pagerConfig: {
            pageSize: 10,
            pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
            perfect: true,
        },
        formConfig: {
            titleWidth: 80,
            titleAlign: "right",
            items: [
                {
                    field: "ipaddr",
                    title: "登录地址",
                    span: 4,
                    itemRender: { name: "$input", props: { placeholder: "请输入登录地址" } },
                },
                {
                    field: "userName",
                    title: "用户名称",
                    span: 4,
                    itemRender: { name: "$input", props: { placeholder: "请输入用户名称" } },
                },
                {
                    field: "status",
                    title: "状态",
                    span: 4,
                    itemRender: {
                        name: "$select",
                        options: sys_common_status,
                    },
                },
                {
                    field: "accessTime",
                    title: "创建时间",
                    span: 5,
                    itemRender: {
                        name: "ElDatePicker",
                        props: {
                            valueFormat: "YYYY-MM-DD",
                            type: "daterange",
                            rangeSeparator: "-",
                            startPlaceholder: "开始日期",
                            endPlaceholder: "结束日期",
                        },
                    },
                },
                {
                    itemRender: {
                        name: "$buttons",
                        children: [
                            {
                                props: {
                                    type: "submit",
                                    content: "查询",
                                    status: "primary",
                                },
                            },
                            {
                                props: {
                                    type: "reset",
                                    content: "重置",
                                },
                            },
                        ],
                    },
                },
            ],
        },
        toolbarConfig: {
            refresh: true,
            zoom: true,
            export: proxy.$auth.hasPermi("system:logininfor:export"),
            custom: true,
            slots: {
                buttons: "toolbar_buttons",
            },
        },
        proxyConfig: {
            paramsChangeLoad: false, //额外的请求参数改变时是否重新请求数据
            seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
            sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
            filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
            form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
            // 对应响应结果 { result: [], page: { total: 100 } }
            props: {
                result: "rows", // 配置响应结果列表字段
                total: "total", // 配置响应结果总页数字段
            },
            ajax: {
                // 接收 Promise
                query: ({ page, sorts, filters, form, params }: any) => {
                    const accessTime = proxy.addDateRange({}, form.accessTime, "accessTime");
                    const queryParams: any = Object.assign({}, form, page, accessTime, params);
                    // 处理排序条件
                    const orderByColumn = <Array<String>>[];
                    const isAsc = <Array<Boolean>>[];
                    sorts.forEach((m: any) => {
                        orderByColumn.push(m.field);
                        isAsc.push(m.order);
                    });
                    queryParams.orderByColumn = orderByColumn.join(",");
                    queryParams.isAsc = isAsc.join(",");
                    // 处理筛选条件
                    filters.forEach(({ property, values }: any) => {
                        queryParams[property] = values.join(",");
                    });
                    return pageLogininfor({
                        ...removeObjectNull(queryParams),
                    }).then((response) => {
                        return response;
                    });
                },
            },
        },
        checkboxConfig: {
            trigger: "row",
        },
        columns: [
            { type: "checkbox", width: 60 },
            {
                field: "infoId",
                title: "访问编号",
                sortable: true,
            },
            {
                field: "userName",
                title: "用户名称",
                sortable: true,
            },
            {
                field: "status",
                title: "操作登录状态状态",
                slots: {
                    default: "slotStatus",
                },
            },
            {
                field: "msg",
                title: "描述",
                sortable: true,
            },
            {
                field: "accessTime",
                title: "访问时间",
                sortable: true,
                formatter({ cellValue }: any) {
                    return XEUtils.toDateString(cellValue, "yyyy-MM-dd HH:ss:mm");
                },
            },
        ],
    });

    /** 查询登录日志列表 */
    // function getList() {
    //     loading.value = true;
    //     pageLogininfor(proxy.addDateRange(queryParams.value, dateRange.value)).then((response: any) => {
    //         logininforList.value = response.rows;
    //         total.value = response.total;
    //         loading.value = false;
    //     });
    // }
    /** 搜索按钮操作 */
    // function handleQuery() {
    //     queryParams.value.page.current = 1;
    //     getList();
    // }
    /** 重置按钮操作 */
    // function resetQuery() {
    //     dateRange.value = [];
    //     proxy.resetForm("queryRef");
    //     queryParams.value.page.current = 1;
    //     proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order);
    // }
    /** 多选框选中数据 */
    function handleSelectionChange(selection: any) {
        ids.value = selection.records.map((item: any) => item.infoId);
        multiple.value = !selection.records.length;
        single.value = selection.records.length != 1;
        selectName.value = selection.records.map((item: any) => item.userName);
    }
    /** 排序触发事件 */
    function handleSortChange(column: any, prop: any, order: any) {
        queryParams.value.orderByColumn = column.prop;
        queryParams.value.isAsc = column.order;
        xGrid.value.commitProxy("reload");
    }
    /** 删除按钮操作 */
    function handleDelete(row: any) {
        const infoIds = row.infoId || ids.value;
        proxy.$modal
            .confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?')
            .then(function () {
                return delLogininfor(infoIds);
            })
            .then(() => {
                xGrid.value.commitProxy("reload");
                proxy.$modal.msgSuccess("删除成功");
            })
            .catch(() => {});
    }
    /** 清空按钮操作 */
    function handleClean() {
        proxy.$modal
            .confirm("是否确认清空所有登录日志数据项?")
            .then(function () {
                return cleanLogininfor();
            })
            .then(() => {
                xGrid.value.commitProxy("reload");
                proxy.$modal.msgSuccess("清空成功");
            })
            .catch(() => {});
    }
    /** 解锁按钮操作 */
    function handleUnlock() {
        const username = selectName.value;
        proxy.$modal
            .confirm('是否确认解锁用户"' + username + '"数据项?')
            .then(function () {
                return unlockLogininfor(username);
            })
            .then(() => {
                proxy.$modal.msgSuccess("用户" + username + "解锁成功");
            })
            .catch(() => {});
    }
    /** 导出按钮操作 */
    // function handleExport() {
    //     proxy.download(
    //         "system/logininfor/export",
    //         {
    //             ...queryParams.value,
    //         },
    //         `config_${new Date().getTime()}.xlsx`
    //     );
    // }
</script>
